<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
    export default {
        name: '${className}',
    };
</script>

<script setup lang="ts">
    import { onMounted, reactive, ref, toRefs } from 'vue';
    import { ElForm, ElTable, ElMessage, ElMessageBox } from 'element-plus';
    import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
    import { ${ClassName}FormData, ${ClassName}Item, ${ClassName}QueryParam, Dialog } from '@/types';
    import { list${ClassName}Pages, get${ClassName}FormDetail, update${ClassName}, add${ClassName}, delete${ClassName} } from '@/api/${moduleName}/${className}';

    const queryFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
    const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

    const state = reactive({
        loading: true,
        // 选中ID数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        queryParams: {
            pageNum: 1,
            pageSize: 10,
        } as ${ClassName}QueryParam,
        ${className}List: [] as ${ClassName}Item[],
        total: 0,
        dialog: {} as Dialog,
        formData: { sort: 1 } as ${ClassName}FormData,
        rules: {
            <#list fieldEntityPlusList as item>
            <#if item.required>
            ${item.attrName}: [
                {
                    required: true,
                    message: '请输入${item.columnComment}',
                    trigger: 'blur',
                },
            ],
            </#if>
            </#list>
        },
    });

    const { loading, multiple, queryParams, ${className}List, total, dialog, formData, rules } = toRefs(state);

    function handleQuery() {
        state.loading = true;
        list${ClassName}Pages(state.queryParams).then(({ data }) => {
            state.${className}List = data.list;
            state.total = data.total;
            state.loading = false;
        });
    }

    function resetQuery() {
        queryFormRef.value.resetFields();
        handleQuery();
    }

    function handleSelectionChange(selection: any) {
        state.ids = selection.map((item: any) => item.id);
        state.single = selection.length !== 1;
        state.multiple = !selection.length;
    }

    function handleAdd() {
        state.dialog = {
            title: '添加${tableComment}',
            visible: true,
        };
    }

    function handleUpdate(row: any) {
        state.dialog = {
            title: '修改${tableComment}',
            visible: true,
        };
        const ${className}Id = row.id || state.ids;
        get${ClassName}FormDetail(${className}Id).then(({ data }) => {
            state.formData = data;
        });
    }

    /**
     * 表单提交
     */
    function submitForm() {
        dataFormRef.value.validate((isValid: boolean) => {
            if (isValid) {
                if (state.formData.id) {
                    update${ClassName}(state.formData.id, state.formData).then(() => {
                        ElMessage.success('修改成功');
                        cancel();
                        handleQuery();
                    });
                } else {
                    add${ClassName}(state.formData).then(() => {
                        ElMessage.success('新增成功');
                        cancel();
                        handleQuery();
                    });
                }
            }
        });
    }

    /**
     * 取消
     */
    function cancel() {
        state.dialog.visible = false;
        dataFormRef.value.resetFields();
    }

    /**
     * 删除
     */
    function handleDelete(row: any) {
        const ids = [row.id || state.ids].join(',');
        ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
            .then(() => {
                delete${ClassName}(ids).then(() => {
                    ElMessage.success('删除成功');
                    handleQuery();
                });
            })
            .catch(() => ElMessage.info('已取消删除'));
    }

    onMounted(() => {
        handleQuery();
    });
</script>

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item>
                <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
                <el-button type="danger" :icon="Delete" click="handleDelete" :disabled="multiple">删除</el-button>
            </el-form-item>

        <#if queryList??>
            <#list queryList as item>
            <el-form-item>
                <#if item.formType == 'text' || item.formType == 'textarea' || item.formType == 'editor'>
                    <el-input v-model="queryParams.${item.attrName}" placeholder="${item.columnComment!}" clearable></el-input>
                <#elseif item.formType == 'select'>
                    <el-select v-model="queryParams.${item.attrName}" placeholder="${item.columnComment!}">
                        <el-option label="选择" value="0"></el-option>
                    </el-select>
                <#elseif item.formType == 'radio'>
                    <el-radio-group v-model="queryParams.${item.attrName}">
                        <el-radio :label="0">启用</el-radio>
                        <el-radio :label="1">禁用</el-radio>
                    </el-radio-group>
                <#elseif item.formType == 'date'>
                    <el-date-picker type="date" placeholder="${item.columnComment!}" v-model="queryParams.${item.attrName}" value-format="YYYY-MM-DD"></el-date-picker>
                <#elseif item.formType == 'datetime'>
                    <el-date-picker type="datetime" placeholder="${item.columnComment!}" v-model="queryParams.${item.attrName}" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                <#else>
                    <el-input v-model="queryParams.${item.attrName}" placeholder="${item.columnComment!}" clearable></el-input>
                </#if>
            </el-form-item>
             </#list>
         </#if>


            <el-form-item>
                <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
                <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="${className}List" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" min-width="5%" />
        <#if fieldEntityPlusList??>
            <#list fieldEntityPlusList as item>
                <#if item.list>
                <el-table-column prop="${item.attrName}" label="${item.columnComment}" min-width="10" />
                </#if>
             </#list>
        </#if>

            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle plain />
                    <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)" />
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页工具条 -->
        <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />

        <!-- 表单弹窗 -->
        <el-dialog :title="dialog.title" v-model="dialog.visible" top="5vh" width="600px">
            <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
            <#if fieldEntityPlusList??>
            <#list fieldEntityPlusList as item>
                <#if item.form>
                    <#if item.formType == 'text'>
                        <el-form-item label="${item.columnComment}" prop="${item.attrName}">
                            <el-input v-model="formData.${item.attrName}" auto-complete="off" />
                        </el-form-item>
                    <#elseif item.formType == 'textarea'>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                            <el-input type="textarea" v-model="formData.${item.attrName}"></el-input>
                        </el-form-item>
                    <#elseif item.formType == 'editor'>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                            <el-input type="textarea" v-model="formData.${item.attrName}"></el-input>
                        </el-form-item>
                    <#elseif item.formType == 'select'>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                           <el-select v-model="formData.${item.attrName}" placeholder="请选择">
                                <el-option label="默认" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    <#elseif item.formType == 'radio'>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                            <el-radio-group v-model="formData.${item.attrName}">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    <#elseif item.formType == 'checkbox'>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                            <el-checkbox-group v-model="formData.${item.attrName}">
                                <el-checkbox label="启用" name="type"></el-checkbox>
                                <el-checkbox label="禁用" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    <#elseif item.formType == 'date'>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                            <el-date-picker type="date" placeholder="${item.columnComment!}" v-model="formData.${item.attrName}" value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                    <#elseif item.formType == 'datetime'>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                            <el-date-picker type="datetime" placeholder="${item.columnComment!}" v-model="formData.${item.attrName}" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    <#else>
                        <el-form-item label="${item.columnComment!}" prop="${item.attrName}">
                            <el-input v-model="formData.${item.attrName}" placeholder="${item.columnComment!}"></el-input>
                        </el-form-item>
                    </#if>

                </#if>
            </#list>
            </#if>



            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped></style>
